<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="mobileOptimized" content="240" />
<meta name="format-detection" content="telephone=no" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>Geo City</title>
</head>
<body>

  <div class="container">
  	<div class="span13 head">
  		<div class="logo"></div>
  		<ul class="headnav">
  			<li><a href="#Narrative">Narrative Structure</a></li>
			<li><a href="#Method">Method</a></li>
			<li><a href="#Technology">Technology</a></li>
			<li><a href="#Understanding">Understanding Beijing</a></li>
			<li><a href="#Member">Team Member</a></li>
  		</ul>
  	</div>
  	<div class="span13 introduction">
  		<div class="page-header clearfix">
            <div class="head-h1" >Introduction</div>
            <div class="red-line"></div>
        </div>
  		<div class="clearfix">
  			<div class="des des-font">
  			GeoCity Smart City is the main exhibition for Beijing Design Week 2012. Curated by CMoDA, the exhibition augments and maps information design and application cases for smart cities initiatives around the world, and to use it as input for Smart Beijing case development.GeoCity Smart City is the main exhibition for Beijing Design Week 2012. Curated by CMoDA, the exhibition augments and maps information design and applicationcases for smart cities initiatives around the world, and to use it as input for Smart Beijing case development.
  			</div>
  			<div class="timeline"></div>
  		</div>
  	</div>
	<div class="span13 narrative">
  		<div class="page-header clearfix">
            <div class="head-h1" name="Narrative">Narrative Structure</div>
            <div class="red-line"></div>
        </div>
  		<div class="clearfix">
  			<div class="des des-font">
  			<h1>General:</h1>
				The city is an organic integration of the development of human civilization and the natural carrying capacity has unique survival operation system, subtly adjust the balance between human behavior, science and technology, biotechnology and information exchange, cultural development, economic growth and environmental protection to maintainvigor cycle.
  			</div>
  			<div class="img-slide">
  				<div class="navi"></div>
  				<div class="navi-title">2012.8.28 Linz exhibition</div>
  				<div>
				<div class="scrollable" id="navigator">
				  <div class="items">
				    <div>
				    <img src="css/img/GeoCity_website_image_001.jpg"/>
				    </div>
				    <div>
				    <img src="css/img/GeoCity_website_image_002.jpg"/>
				    </div>
				     <div>
				    <img src="css/img/GeoCity_website_image_003.jpg"/>
				    </div>
				  </div>
				</div>
				</div>
  			</div>
  		</div>
  		<div class="narrative-btn"></div>
  	</div>
  	
  	<div class="span13 method">
  		<div class="page-header clearfix">
            <div class="head-h1" ><a name="Method"></a>Method</div>
            <div class="red-line"></div>
        </div>
  		<div class="clearfix">
			<ul class="des-font">
	  			<li>Statistical data visualization: Statistical Yearbook, government documents, Wikipedia, Baidu Encyclopedia</li>
				<li>Online data mining: user-generated data, the site of historical data, real-time API access</li>
				<li>The regional distribution of presents: literature review, site visits, online map data collation</li>
				<li>City story: storytelling presented city data</li>
	  		</ul>
  		</div>
  		<div class="concept"></div>
  	</div>
  	
  	<div class="span13 method technology">
  		<div class="page-header clearfix">
            <div class="head-h1" ><a name="Technology"></a>Technology</div>
            <div class="red-line"></div>
        </div>
  		<div class="clearfix">
			<ul class="des-font">
	  			<li>Interactive narrative notebook: By electronic identification code points of the book, display the content 
on the big screen, supports tap, stroking two interactive modes</li>
				<li>Multi-screen storytelling system: about urban story through a multi-screen, multimedia support: 
text, images, video, graphics, animation, dynamic data visualization, Internet data access</li>
	  		</ul>
  		</div>
  		<div class="technology"></div>
  	</div>
  	
  	
  	<div class="span13 understanding">
  		<div class="page-header clearfix">
            <div class="head-h1"><a name="Understanding"></a>Understanding Beijing</div>
            <div class="red-line"></div>
        </div>
  		<div class="clearfix">
			<div class="des des-font">
			Beijing's growth: What did beijing look like before?How to develop into what it is today?
From the data: What is behind the data?Who is the creator of the data?
	  		</div>
  		</div>
  		<div class="urban_growth"></div>
  		<div class="power_change"></div>
  		<div class="social_network"></div>
  	</div>
  	<div class="span13 mumber">
  		<div class="page-header clearfix">
            <div class="head-h1"><a name="Member"></a>Team Member</div>
            <div class="red-line"></div>
        </div>
  		<div class="member"></div>
  	</div>
  	
  	
  </div>
  <div class="footer"></div>
  <script type="text/javascript" src="js/jquery.tools.min.js"></script>
  <script>
$(document).ready(function() {
	$("#navigator").scrollable({circular: true}).navigator({indexed:true}).autoscroll({ autoplay: true,interval:1500 });
});
</script>
</body>
</html>